<template>
  <div class="bean-trans-wrap bg-color">
    <div class="trans-item">
      <van-cell-group class="trans-item-cells">
        <van-cell title="可转让数量" :border="false">
          <div Slots="value">
            <span style="font-family: DingMedium; color: #ff6d24"
              >{{ this.ruleForm.dou_num_usable }} 轶善豆</span
            >
          </div>
        </van-cell>
        <van-cell title="轶善豆" :border="false">
          <div Slots="value">
            <van-row>
              <van-col :span="18">
                <van-field
                  v-model="ruleForm.dou_num"
                  placeholder="输入转让数量"
                  type="number"
                  @blur="fieldBlur(ruleForm.dou_num)"
                  style="margin: 0; padding: 0; font-size: 12px"
                />
              </van-col>
              <van-col :span="6" style="text-align: right">
                <span
                  @click="checkAll"
                  style="color: #5c92e9; border-bottom: 1px solid #5c92e9"
                  >全部</span
                >
              </van-col>
            </van-row>
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="lnie-place"></div>
    <div class="trans-item">
      <van-cell-group class="trans-item-cells">
        <van-cell title="转让金额" size="large">
          <div Slots="value">
            <span>{{ dataOption.transfer_dou_num }}</span>
          </div>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="trans-item-cells">
        <van-cell title="商户" size="large">
          <div Slots="value">
            <van-field
              v-model="ruleForm.store_input"
              placeholder="输入转让商户名称/编号"
              style="margin: 0; padding: 0; font-size: 12px"
            />
          </div>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="fix-bottom-btn">
      <van-button
        type="custom-primary"
        size="large"
        block
        @click="toTransConfirm"
        >下一步</van-button
      >
    </div>
    <!-- 线下付款收款人信息 -->
    <van-popup
      class="popup-warp"
      closeable
      v-model="show"
      round
      :style="{ width: '90%' }"
    >
      <!-- -->
      <div class="popup-title">确认收款人信息</div>
      <van-cell-group class="trans-item-cells">
        <van-cell title="银行卡号" size="large">
          <div Slots="value">
            <van-field
              v-model="ruleForm.bank_card"
              :readonly="readonly"
              placeholder=""
              type="number"
              input-align="right"
              style="margin: 0; padding: 0; font-size: 12px"
            />
          </div>
        </van-cell>

        <van-cell title="所属银行" size="large">
          <div Slots="value">
            <van-field
              v-model="ruleForm.bank_name"
              placeholder=""
              input-align="right"
              readonly
              @click="bankCardChoose"
              @click-right-icon="bankCardChoose()"
              :right-icon="righticon"
              style="margin: 0; padding: 0; font-size: 12px"
            />
          </div>
        </van-cell>
        <van-cell title="持卡人姓名" size="large">
          <div Slots="value">
            <van-field
              v-model="ruleForm.card_holder"
              :readonly="readonly"
              placeholder=""
              input-align="right"
              style="margin: 0; padding: 0; font-size: 12px"
            />
          </div>
        </van-cell>
        <van-cell title="持卡人手机号" size="large">
          <div Slots="value">
            <van-field
              v-model="ruleForm.bound_phone"
              :readonly="readonly"
              placeholder=""
              input-align="right"
              style="margin: 0; padding: 0; font-size: 12px"
            />
          </div>
        </van-cell>
      </van-cell-group>
      <van-row v-if="readonly" class="popup-edit" type="flex" justify="center">
        <van-col :span="2">
          <img class="popup-img" src="../../../assets/images/ic_info.png" />
        </van-col>
        <van-col :span="10"> 更换收款人信息 </van-col>
        <van-col :span="12">
          <div class="popup-btn" @click="eidt">点我修改</div>
        </van-col>
      </van-row>
      <div class="popup-surebtn">
        <van-button
          type="custom-primary"
          size="large"
          block
          @click="toBankCardConfirm"
          >确认</van-button
        >
      </div>
    </van-popup>

    <van-action-sheet v-model="bank_card_show" title="所属银行">
      <div class="content">
        <div class="account_cards_wrap">
          <scriptLink></scriptLink>
          <ul class="card_list">
            <li
              v-for="(item, index) in accountCardList"
              :key="index"
              @click="chooseCard(item)"
            >
              <div class="cards_item">
                <div class="card_info">
                  <div class="item_icon">
                    <svg class="icon bank_icon" aria-hidden="true">
                      <use :xlink:href="'#' + item.bank_logo" />
                    </svg>
                  </div>
                  <div class="item_info">
                    <p>{{ item.bank_name }}</p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </van-action-sheet>
    <!-- <van-dialog v-model="show" title="确认收款人信息" show-cancel-button>
			
		</van-dialog> -->
  </div>
</template>

<script>
import {
  Cell,
  CellGroup,
  Field,
  Col,
  Row,
  Button,
  Toast,
  Dialog,
  Popup,
  ActionSheet,
} from "vant";
import { getMessageBox, validatePhone } from "@/assets/js/utils";
import bankCardList from "@/assets/js/bankCardList";
import { getStore, getAllBank, getDouTransMoney } from "@/api/api";
export default {
  name: "beanTrans",
  components: {
    scriptLink: {
      render(createElement) {
        return createElement("script", {
          attrs: {
            type: "text/javascript",
            src: "//at.alicdn.com/t/font_1409441_hxsfeysl9j.js",
          },
        });
      },
    },
    vanCell: Cell,
    vanCellGroup: CellGroup,
    vanField: Field,
    vanCol: Col,
    vanRow: Row,
    vanButton: Button,
    vanDialog: Dialog,
    vanPopup: Popup,
    vanActionSheet: ActionSheet,
  },
  data() {
    return {
      readonly: true,
      show: false,
      bank_card_show: false,
      islink: false,
      righticon: "",
      urlpath: "",
      ruleForm: {
        dou_num_usable: this.$route.query.dou_num_usable,
        dou_num: "",
        store_input: "773347", //773347 开发编号	665937正式编号
        store_id: "",
        store_name: "",
        store_type: "",
        bank_card: "",
        bank_name: "",
        card_holder: "",
        bound_phone: "",
      },
      accountCardList: [],
      dataOption: {
        transfer_dou_num: "", // 转让豆
      },
    };
  },
  created() {
    this.getBankCardList();
  },
  methods: {
    checkAll() {
      this.ruleForm.dou_num = this.ruleForm.dou_num_usable;
    },
    //轶善豆转化
    fieldBlur(num) {
      getDouTransMoney({
        dou_num: num,
      }).then((res) => {
        if (res.code == 200000) {
          this.dataOption.transfer_dou_num = res.data;
        } else {
          //   this.dataOption.transfer_dou_num = "0";
          getMessageBox(res.msg);
        }
      });
    },
    eidt() {
      this.readonly = false;
      this.islink = true;
      this.urlpath = "/bankList";
      this.righticon = "arrow";
    },
    bankCardChoose() {
      this.bank_card_show = true;
    },
    // 选择银行卡
    chooseCard(item) {
      console.log(item);

      this.setCheckedBack(item.bank_name);
    },
    // 设置当前银行卡信息
    setCheckedBack(name) {
      // this.bankCardId = id;
      this.ruleForm.bank_name = name;
      this.bank_card_show = false;
    },
    // 获取银行卡列表
    getBankCardList() {
      getAllBank().then((res) => {
        if (res.code == 200000) {
          let arr = [];
          for (let name in res.data) {
            arr.push({ bank_name: res.data[name] });
          }
          bankCardList.map((bankElem, bankIndex) => {
            arr.forEach((cardElem, index) => {
              if (
                bankElem.value == cardElem.bank_name ||
                bankElem.value == `中国${cardElem.bank_name}`
              ) {
                cardElem.bank_logo = "icon" + bankIndex;
                return false;
              }
            });
          });
          // 						this.list = arr
          // 						bankCardList.map((bankElem, bankIndex) => {
          // 							res.data.forEach((cardElem, index) => {
          // 								if (
          // 									bankElem.value == cardElem.bank_name ||
          // 									bankElem.value == `中国${cardElem.bank_name}`
          // 								) {
          // 									cardElem.bank_logo = "icon" + bankIndex;
          // 									return false;
          // 								}
          // 							});
          // 						});
          this.accountCardList = arr; //res.data;
          // 						this.setCheckedBack(
          // 							this.accountCardList[0].id,
          // 							this.accountCardList[0].bank_name
          // 						);
        } else {
          this.accountCardList = [];
        }
      });
    },
    //确认收款人信息
    toBankCardConfirm() {
      if (this.ruleForm.bank_card == "") {
        getMessageBox("银行卡号不能为空");
        return false;
      }
      if (this.ruleForm.bank_name == "") {
        getMessageBox("所属银行不能为空");
        return false;
      }
      if (this.ruleForm.card_holder == "") {
        getMessageBox("持卡人姓名不能为空");
        return false;
      }
      if (!validatePhone(this.ruleForm.bound_phone)) {
        return false;
      }
      //   if (this.ruleForm.bound_phone == "") {
      //     getMessageBox("持卡人手机号不能为空");
      //     return false;
      //   }
      if (this.ruleForm.store_id != "" && this.ruleForm.dou_num != "") {
        this.$router.push({
          path: "/beanTransConfirm",
          query: {
            dou_num: this.ruleForm.dou_num,
            transfer_money: this.dataOption.transfer_dou_num,
            store_id: this.ruleForm.store_id,
            store_name: this.ruleForm.store_name,
            bank_card: this.ruleForm.bank_card,
            bank_name: this.ruleForm.bank_name,
            card_holder: this.ruleForm.card_holder,
            bound_phone: this.ruleForm.bound_phone,
            store_type: this.ruleForm.store_type,
          },
        });
      }
    },
    // 跳转到确认转让
    async toTransConfirm() {
      if (this.ruleForm.dou_num == "") {
        getMessageBox("转让豆数量不能为空");
        return false;
      }
      if (this.ruleForm.store_input == "") {
        getMessageBox("商户名称不能为空");
        return false;
      }

      Toast.loading({
        message: "正在查询商户信息...",
        forbidClick: true,
        duration: 0,
      });
      const getStoreInfo = await getStore({
        input: this.ruleForm.store_input,
      }).then((res) => {
        Toast.clear();
        if (res.code == 200000) {
          if (res.data.storeData) {
            this.ruleForm.store_id = res.data.storeData.id;
            this.ruleForm.store_name = res.data.storeData.name;
            this.ruleForm.store_type = res.data.storeData.store_type;
          }
          if (res.data.bankCardList && res.data.bankCardList.length != 0) {
            for (let name in this.ruleForm) {
              if (res.data.bankCardList[0][name] !== undefined) {
                this.ruleForm[name] =
                  res.data.bankCardList[0][name] == null
                    ? ""
                    : res.data.bankCardList[0][name];
              }
            }
          }
        } else {
          getMessageBox(res.msg);
          this.ruleForm.store_id = "";
        }
      });
      if (this.ruleForm.store_type == "线下") {
        if (this.ruleForm.bank_card == "") {
          this.eidt();
        }
        this.show = true;
      } else {
        if (this.ruleForm.store_id != "" && this.ruleForm.dou_num != "") {
          this.$router.push({
            path: "/beanTransConfirm",
            query: {
              dou_num: this.ruleForm.dou_num,
              transfer_money: this.dataOption.transfer_dou_num,
              store_id: this.ruleForm.store_id,
              store_name: this.ruleForm.store_name,
              store_type: this.ruleForm.store_type,
            },
          });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bean-trans-wrap {
  margin-bottom: 100px;
  width: 375px;
  overflow: hidden;
  min-height: calc(100% - 100px);

  .trans-item-cells /deep/ .van-cell__title,
  .trans-item-cells /deep/ .van-van-cell__value {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  .trans-item-cells /deep/ .van-cell__value {
    font-size: 14px;
    text-align: left;
    flex: 2;
  }

  .lnie-place {
    width: 100%;
    height: 10px;
    background: rgba(241, 246, 253, 1);
  }
  .popup-warp {
    .popup-edit {
      padding: 15px 16px;
      font-size: 16px;
      font-weight: 500;
      color: #666666;
    }
    .popup-img {
      width: 18px;
    }
    .popup-btn {
      color: #5c92e9;
    }
    .popup-surebtn {
      padding: 0 16px 20px 16px;
    }
    /deep/ .van-cell__value {
      font-size: 14px;
      text-align: right;
      flex: 2;
    }
    /deep/ .van-cell__right-icon {
      margin-top: 16px;
    }
  }
  .popup-title {
    color: #4197f5;
    font-size: 18px;
    text-align: center;
    padding: 17px 0 10px;
  }
  .account_cards_wrap {
    overflow: hidden;
    border-bottom: 1px solid rgb(241, 241, 241);
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.11);

    ul.card_list {
      margin: 10px 15px 0;
      overflow: hidden;

      li {
        .cards_item {
          width: 100%;
          height: 64px;
          background-size: 100% 100%;
          border-radius: 10px 10px 0 0;
          overflow: hidden;

          .card_info {
            height: 50px;
            overflow: hidden;
            margin-top: 17px;

            .item_icon {
              width: 39px;
              height: 39px;
              background: #fff;
              border-radius: 50%;
              overflow: hidden;
              float: left;
              // margin-top: 5px;
              // margin-left: 20px;

              .bank_icon {
                padding: 0;
                width: 24px;
                height: 24px;
                display: block;
                margin: 8px auto;
                overflow: hidden;
              }
            }

            .item_info {
              float: left;
              width: 250px;
              margin-left: 20px;

              p,
              span {
                // color: #fff;
              }

              p:nth-of-type(1) {
                font-size: 18px;
                line-height: 39px;
              }

              p:nth-of-type(2) {
                line-height: 33px;

                span {
                  font-size: 14px;
                  line-height: 15px;
                }
              }
            }
          }
        }

        .cards_item.bank_bg_0 {
          background-image: url("../../../assets/images/bgcard0.png");
        }

        .cards_item.bank_bg_1 {
          background-image: url("../../../assets/images/bgcard1.png");
        }

        .cards_item.bank_bg_2 {
          background-image: url("../../../assets/images/bgcard2.png");
        }
      }

      li:not(:first-child) {
        margin-top: -8px;
      }
    }

    .key_board_wrap {
      padding-top: 20px;

      .van-number-keyboard {
        position: relative;
        margin-top: 20px;
      }
    }
  }
}
</style>
